<template>
  <div style="width: 100vw; height: 100vh; overflow: hidden; display: flex">
    <div style="flex: 1;background: aqua">
      <el-image style="width: 100%; height: 100%" fit:cover
                src='/images/welcome-pic.png' />
    </div>

    <div style="width: 20%; background: white">

      <router-view v-slot="{ Component }">
        <transition name="scale" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>

    </div>
  </div>
</template>

<script setup>

</script>

<style scoped>

.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}
.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}


</style>